<!DOCTYPE HTML>
<html>
<head>
    <!-- support for mobile touch devices -->
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <link href="../cornerstone.min.css" rel="stylesheet">

    <style>
        /* prevents selection when left click dragging */
        .disable-selection {
            -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
        }
        /* prevents cursor from changing to the i bar on the overlays*/
        .noIbar {
            cursor:default;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>
            Mobile Touch Tools Example
        </h1>
        <p>
            This page contains an example of some touch-support tools.
            Pinch to zoom, touch and drag to change window width and level.
            Note - this example works on iOS/Android based devices but may not work on other devices yet.
        </p>
        <a href="../index.html">Go back to the Examples page</a>
    </div>
    <div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
         oncontextmenu="return false"
         class='cornerstone-enabled-image'
         unselectable='on'
         onselectstart='return false;'
         onmousedown='return false;'>
        <div id="dicomImage"
             style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
        </div>
        <div id="mrtopleft" style="position: absolute;top:3px; left:3px">
            Patient Name
        </div>
        <div id="mrtopright" style="position: absolute;top:3px; right:3px">
            Hospital
        </div>
        <div id="mrbottomright" style="position: absolute;bottom:3px; right:3px">
            Zoom:
        </div>
        <div id="mrbottomleft" style="position: absolute;bottom:3px; left:3px">
            WW/WC:
        </div>
    </div>
</body>

<!-- jquery - included to make things easier to demo, not needed or used by the cornerstone library but
is used by our example image loader-->
<script src="../jquery.min.js"></script>

<!-- include the hammer.fakemultitouch so we can test with a mouse -->
<script src="../touch-emulator.js"></script>
<script> TouchEmulator(); </script>

<!-- include the hammer.js library for touch gestures-->
<script src="../hammer.min.js"></script>

<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>
<script src="../cornerstoneMath.min.js"></script>

<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>

<script>
    var element = $('#dicomImage').get(0);

    // Listen for changes to the viewport so we can update the text overlays in the corner
    function onViewportUpdated(e) {
        var viewport = cornerstone.getViewport(e.target)
        $('#mrbottomleft').text("WW/WC: " + Math.round(viewport.voi.windowWidth) + "/" + Math.round(viewport.voi.windowCenter));
        $('#mrbottomright').text("Zoom: " + viewport.scale.toFixed(2));
    };
    
    $('#dicomImage').on("CornerstoneImageRendered", onViewportUpdated);

    var imageId = 'example://1';

    // image enable the dicomImage element
    cornerstone.enable(element);
    cornerstoneTools.touchInput.enable(element);
    cornerstone.loadImage(imageId).then(function(image) {
        cornerstone.displayImage(element, image);
       
        // Enable all tools we want to use with this element
        cornerstoneTools.wwwcTouchDrag.activate(element);
        cornerstoneTools.zoomTouchPinch.activate(element);
    });
</script>
</html>
